/**
* Created by youyaping on 2017/10/12.
*/
<template lang="pug">
  li(@mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" :style="{backgroundColor: backgroundColor}")
    div
      i.el-icon-caret-right
      slot(name="title")
    ul(v-show="opened")
      slot
</template>
<script>
  export default {
    name: 'ContextMenuSub',
    inject: ['rootMenu'],
    data() {
      return {
        opened: false,
        backgroundColor: '#fff'
      }
    },
    methods: {
      handleMouseEnter() {
        this.opened = true
        this.backgroundColor = this.rootMenu.hoverColor
      },
      handleMouseLeave() {
        this.opened = false
        this.backgroundColor = '#fff'
        
      }
    }
  }

</script>
